//Create test template
var rowTemplate = document.createElement('DIV');
rowTemplate.setAttribute('id', 'TemplateRow');

var rowTemplateValue = document.createElement('DIV');
rowTemplateValue.setAttribute('id', 'TemplateRowValue');
$(rowTemplateValue).css( {
	'color' : 'green',
	'background' : '#aa0000',
	'cursor' : 'default'
})

rowTemplate.appendChild(rowTemplateValue)

var rowTemplateValue2 = document.createElement('DIV');
rowTemplateValue2.setAttribute('id', 'TemplateRowValueCustom1');
$(rowTemplateValue2).css( {
	'color' : 'green',
	'background' : 'pink',
	'cursor' : 'default'
})

rowTemplate.appendChild(rowTemplateValue2)
//bind events on row template
$(rowTemplate).bind('mouseenter', function()
{
	/*$(this).find('DIV').css( {
		'background' : 'red',
		'color' : 'white'

	});*/
	$(this).find('DIV').animate({backgroundColor: '#000000', color: 'red'}, 10);
});
$(rowTemplate).bind('mouseleave', function()
{
	/*$(this).find('DIV').css( {
		'background' : 'silver',
		'color' : 'white'
	});*/
	$(this).find('DIV').animate({backgroundColor: '#aa0000', color: '#fff'}, 100);
});
$(rowTemplate).bind('click', function()
{
	/*$(this).find('DIV').css( {
		'background' : 'green',
		'color' : 'white'
	});*/
	//$(this).animate({backgroundColor: '#aa0000', color: '#fff', width: 500}, 1000);
});

var listTemplate = document.createElement('DIV');
listTemplate.setAttribute('id', 'TemplateList');
$(listTemplate).css( {
	'color' : 'green',
	'background' : 'gray',
	'width' : '200px',
	'height' : '300px',
	'overflow-y' : 'auto',
	'overflow-x' : 'hidden',
	'border' : '2px inset'

})

// $(listTemplate).draggable();
//$(listTemplate).attr('draggable', 'true')
// $(listTemplate).attr('resizable', 'true')

$(listTemplate).addClass('ui-widget-content')

var l = new List(listTemplate);

l.Create();
$(document.body).append($(l.VisualNode()))

l.DataSource( [ {
	'Custom1' : 'Custom1Value'
}, 1, 2, 3, 4 ]);

var ds = [ 5, 6, 7, 8, 9 ];
l.DataSource(ds);
ds = new Array();
ds = [ 10, 11, 12, 12, 33, 22, 1, 21, 12, 12, 12, 12, {	'Custom1' : 'Custom1Value'}, 13,1,2,43,5,6,57,76,2,6,8,8,78,2,97,97,79 ];

l.DataSource(ds);



//l.VisualNode().resizable();

$(window).keypress( function(e)
{
	if (e.which == 32)//space
	{
		//l.DataSource(ds);
		ds[0]='aaaaaaaaaaaa';//change datasource data and rebind
		l.dataSourceChanged();
	}
});
